<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="static/盾牌.svg" type="image/svg+xml">
   <title>防火墙规则管理系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#0E42D2',
                        light: '#E8F3FF',
                        dark: '#0A2463',
                        danger: '#FF4D4F',
                        success: '#52C41A'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #36BFFA 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:shadow-primary/30 hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
    <div class="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col lg:flex-row">
        <!-- 左侧品牌区域 -->
        <div class="bg-gradient-blue text-white p-8 md:p-12 lg:w-1/2 relative overflow-hidden">
            <!-- 装饰图形 -->
            <div class="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-2xl"></div>
            <div class="absolute top-1/3 -right-10 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
            <div class="absolute bottom-10 left-1/4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>

            <!-- 品牌标识 -->
            <div class="relative z-10">
                <div class="flex items-center mb-8">
                    <div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mr-4">
                        <i class="fa fa-shield text-2xl"></i>
                    </div>
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow">防火墙管理系统</h1>
                </div>

                <!-- 系统介绍 -->
                <div class="space-y-6 max-w-md">
                    <h2 class="text-[clamp(1.2rem,2vw,1.8rem)] font-semibold">安全防护，尽在掌握</h2>
                    <p class="text-white/90 leading-relaxed">
                        受阿里云“安全组”的启发而开发的Iptables可视化工具。旨在通过直观的管理界面，轻松配置和监控防火墙规则。
                    </p>

                    <!-- 安全特性 -->
                    <div class="space-y-4 pt-4">
                        <div class="flex items-start">
                            <div class="mt-1 bg-white/20 rounded-full p-2 mr-4">
                                <i class="fa fa-check text-sm"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">多主机管理</h3>
                                <p class="text-sm text-white/80">你只需要部署一次即可管理多台服务器的Iptables规则</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="mt-1 bg-white/20 rounded-full p-2 mr-4">
                                <i class="fa fa-check text-sm"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">智能规则管理</h3>
                                <p class="text-sm text-white/80">灵活配置访问控制策略并备注规则的用途</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="mt-1 bg-white/20 rounded-full p-2 mr-4">
                                <i class="fa fa-check text-sm"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">全面安全审计</h3>
                                <p class="text-sm text-white/80">详细记录规则配置日志</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单区域 -->
<!-- 右侧登录表单区域 -->
<div class="p-8 md:p-12 lg:w-1/2 flex flex-col justify-center">
    <div class="max-w-md mx-auto w-full">
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 mb-2">账户登录</h2>
            <p class="text-gray-500">请输入您的账号信息以登录系统</p>
        </div>

        <!-- 消息提示区域 - 添加Flash消息支持 -->
        <div id="message" class="mb-6 hidden"></div>
        <!-- 添加Flash消息容器 (Jinja2模板语法) -->
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="flash-message hidden" data-category="{{ category }}" data-message="{{ message }}"></div>
            {% endfor %}
          {% endif %}
        {% endwith %}
                <!-- 登录表单 -->
                <form id="loginForm" class="space-y-6">
                    <!-- 用户名输入 -->
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input type="text" id="username" name="username"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition duration-200"
                                placeholder="请输入用户名" required>
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <div class="flex items-center justify-between mb-1">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <a href="#" class="text-sm text-primary hover:text-accent transition-colors">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                <i class="fa fa-lock"></i>
                            </div>
                            <input type="password" id="password" name="password"
                                class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus transition duration-200"
                                placeholder="请输入密码" required>
                            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 记住我选项 -->
                    <div class="flex items-center">
                        <input id="remember" name="remember" type="checkbox"
                            class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-700">
                            记住我的登录状态
                        </label>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit"
                        class="w-full bg-primary text-white font-medium py-3 px-4 rounded-lg btn-hover active:translate-y-0">
                        登录系统
                    </button>
                </form>

                <!-- 底部提示 -->
                <div class="mt-8 text-center text-gray-500 text-sm">
                    <p>还没有账号? <a href="#" class="text-primary hover:text-accent font-medium transition-colors">联系管理员创建</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录表单交互脚本 -->
    <script>
        // 密码显示/隐藏切换 (保持不变)
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', () => {
            // 切换密码输入类型
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            const icon = togglePassword.querySelector('i');
            if (type === 'password') {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });

        // 显示消息提示 (保持不变)
        function showMessage(text, isError = false) {
            const messageDiv = document.getElementById('message');
            messageDiv.textContent = text;
            messageDiv.className = `mb-6 p-3 rounded-lg ${isError ? 'bg-danger/10 text-danger border border-danger/20' : 'bg-success/10 text-success border border-success/20'}`;
            messageDiv.classList.remove('hidden');

            // 3秒后自动隐藏消息
            setTimeout(() => {
                messageDiv.classList.add('hidden');
            }, 3000);
        }

        // 页面加载时处理Flash消息和URL参数
        document.addEventListener('DOMContentLoaded', function() {
            // 1. 处理Flash消息 (来自后端)
            const flashMessageEl = document.querySelector('.flash-message');
            if (flashMessageEl) {
                const message = flashMessageEl.dataset.message;
                const isError = flashMessageEl.dataset.category === 'danger';
                showMessage(message, isError);
            }

            // 2. 处理URL超时参数 (备选方案)
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.get('timeout') === 'true' && !flashMessageEl) {
                showMessage('会话已超时，请重新登录', false);
            }

            // 修复1: 确保表单提交事件在DOMContentLoaded内正确绑定
            const loginForm = document.getElementById('loginForm');
            if (loginForm) {
                loginForm.addEventListener('submit', async (e) => {
                    e.preventDefault();

                    // 获取表单数据
                    const username = document.getElementById('username').value;
                    const password = document.getElementById('password').value;
                    const remember = document.getElementById('remember').checked;

                    // 登录按钮状态处理
                    const submitButton = loginForm.querySelector('button[type="submit"]');
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';

                    try {
                        // 构建表单数据
                        const formData = new FormData();
                        formData.append('username', username);
                        formData.append('password', password);
                        formData.append('remember', remember ? 'on' : 'off');

                        // 发送POST请求（添加AJAX标识头）
                        const response = await fetch('/login', {
                            method: 'POST',
                            body: formData,
                            credentials: 'include',  // 携带cookie（保持登录状态）
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'  // 告诉后端这是AJAX请求
                            }
                        });

                        // 解析后端返回的JSON
                        const data = await response.json();

                        if (data.success) {
                            // 登录成功：使用后端返回的URL重定向
                            showMessage('登录成功，正在跳转...', false);
                            setTimeout(() => {
                                window.location.href = data.redirect_url;  // 避免硬编码
                            }, 1000);
                        } else {
                            // 登录失败：显示后端返回的错误信息
                            showMessage(data.message, true);
                            // 恢复按钮状态
                            submitButton.disabled = false;
                            submitButton.innerHTML = '登录系统';
                        }

                    } catch (error) {
                        // 网络错误处理
                        console.error('登录请求失败:', error);
                        showMessage('网络错误，请稍后重试', true);
                        // 恢复按钮状态
                        submitButton.disabled = false;
                        submitButton.innerHTML = '登录系统';
                    }
                });
            }
        });  // 修复2: 添加缺失的DOMContentLoaded事件结束括号

        // 修复3: 将输入框动画效果移到DOMContentLoaded外部或确保正确作用域
        document.addEventListener('DOMContentLoaded', function() {
            // 添加输入框动画效果
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('focus', () => {
                    input.parentElement.classList.add('scale-[1.02]');
                    input.parentElement.style.transition = 'transform 0.2s ease';
                });

                input.addEventListener('blur', () => {
                    input.parentElement.classList.remove('scale-[1.02]');
                });
            });
        });
    </script>
</body>
</html>